<template>
    <div style=" line-height: 60px; display: flex; background-color: rgb(7, 65, 127);">
        <div style="flex: 1; font-size:18px">
      <span :class="iconFold"
      style="cursor: pointer;" @click="coll">
    </span>
    <el-breadcrumb separator="/" style="display: inline-block; margin-left: 20px;">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <el-dropdown style="width: 70px;cursor: pointer;">
        <div style="display: inline-block; width: 50vh;">
            <img src="../assets/logo.png" alt="" style="width: 20px; margin-top: 15px;
            border-radius: 50%; position: relative; top: 5px; right: 20px;">
            <span style="position: relative; bottom: 2px; right: 15px;">{{name}}
            </span><i class="el-icon-arrow-down" style="position: relative; bottom: 1px; right: 15px;"></i>
        </div>
        <el-dropdown-menu style="width: 50px;" slot="dropdown">
          <el-dropdown-item style="font-size: 14px;padding:5px 5px 0 10px">
            <router-link to="/person" >查看</router-link>
          </el-dropdown-item>
          <el-dropdown-item style="font-size: 14px;padding:5px 5px 0 10px">
            <span @click="logout">退出</span>
            <!-- <router-link to="/login" style="text-decoration: none">退出</router-link> -->
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
</template>
<script>
import storage from '@/model/Storage.js'

export default {
  props: ['flag', 'iconFold'],
  data () {
    return {
      currentName: '',
      name: storage.get('userName') || ''
    }
  },
  computed: {
    // currentPathName () {
    //   console.assert('currentPathName', storage.get('currentPathName'))
    //   return storage.get('currentPathName');
    // }
  },
  watch: {
    $route (to, from) {
      this.currentName = to.name
    }
  },
  created () {
  },
  methods: {
    coll () {
      this.$emit('collapse')
    },
    logout () {
      this.$store.commit('delToken');
      this.$router.push({ path: '/login' }).catch(() => {});
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-s-fold, .el-breadcrumb__inner, .el-dropdown{
  color: #fff;;
}

:deep(.el-breadcrumb__inner) {
    color: #fff;
}
</style>
